<template>
    <div class="play-control-container">

        <div class="play-control-content">

            <!-- 唱片封面 -->
            <div class="play-record" :class="rotateFn">
                <n-image width="80" height="80" :src="usePlayConfig.audioCover !== '' ? usePlayConfig.audioCover : defaultIMG" :show-toolbar="false" />
            </div>

            <!-- 控制按钮 -->
            <div class="play-control-btn">

                <!-- 上一首 -->
                <n-popover trigger="hover">
                    <template #trigger>
                        <div class="play-previous">
                            <n-button secondary @click="playSkip('pre')">
                                <template #icon>
                                    <n-icon :size="playControlIcon" :component="Previous16Regular" />
                                </template>
                            </n-button>
                        </div>
                    </template>
                    <span>上一首</span>
                </n-popover>

                <!-- 暂停 -->
                <n-popover trigger="hover">
                    <template #trigger>
                        <div class="play-pause" v-show="!showPauseOrPlay">
                            <n-button secondary @click="pauseAudio">
                                <template #icon>
                                    <n-icon :size="playControlIcon" :component="Pause16Regular" />
                                </template>
                            </n-button>
                        </div>
                    </template>
                    <span>暂停</span>
                </n-popover>

                <!-- 播放 -->
                <n-popover trigger="hover">
                    <template #trigger>
                        <div class="play-play" v-show="showPauseOrPlay">
                            <n-button secondary @click="playAudio">
                                <template #icon>
                                    <n-icon :size="playControlIcon" :component="Play16Regular" />
                                </template>
                            </n-button>
                        </div>
                    </template>
                    <span>播放</span>
                </n-popover>

                <!-- 下一首 -->
                <n-popover trigger="hover">
                    <template #trigger>
                        <div class="play-next">
                            <n-button secondary @click="playSkip('next')">
                                <template #icon>
                                    <n-icon :size="playControlIcon" :component="Next16Regular" />
                                </template>
                            </n-button>
                        </div>
                    </template>
                    <span>下一首</span>
                </n-popover>


                <!-- 停止播放 -->
                <n-popover trigger="hover">
                    <template #trigger>
                        <div class="play-stop">
                            <n-button secondary @click="stopAudio">
                                <template #icon>
                                    <n-icon :size="playControlIcon" :component="Stop16Regular" />
                                </template>
                            </n-button>
                        </div>
                    </template>
                    <span>停止播放</span>
                </n-popover>

            </div>

            <!-- 播放模式 -->
            <div class="play-mode">
                <n-popover trigger="hover" v-if="usePlayConfig.playMode == 'order'">
                    <template #trigger>
                        <n-icon :component="TextBulletListRtl24Filled" @click="changePlayMode('random')" :size="playControlIcon"></n-icon>
                    </template>
                    <span>顺序播放</span>
                </n-popover>
                <n-popover trigger="hover" v-if="usePlayConfig.playMode == 'random'">
                    <template #trigger>
                        <n-icon :component="ArrowsCross" @click="changePlayMode('loop')" :size="playControlIcon"></n-icon>
                    </template>
                    <span>随机播放</span>
                </n-popover>
                <n-popover trigger="hover" v-if="usePlayConfig.playMode == 'loop'">
                    <template #trigger>
                        <n-icon :component="EdtLoop" @click="changePlayMode('like')" :size="playControlIcon"></n-icon>
                    </template>
                    <span>单曲循环</span>
                </n-popover>
                <n-popover trigger="hover" v-if="usePlayConfig.playMode == 'like'">
                    <template #trigger>
                        <n-icon :component="HeartPulse20Regular" @click="changePlayMode('order')" :size="playControlIcon"></n-icon>
                    </template>
                    <span>猜你喜欢</span>
                </n-popover>
            </div>

            <!-- 播放定位 -->
            <div class="play-position">
                <n-icon :size="playControlIcon" :component="MapPin" />
                <n-slider class="slider" v-model:value="usePlayConfig.position" :max="audioProgress" :step="1" :format-tooltip="formatTime" @update:value="updateProgress" :keyboard="false">
                    <template #thumb>
                        <n-icon-wrapper :size="24" :border-radius="12">
                            <n-icon :size="18" :component="Clock16Regular" />
                        </n-icon-wrapper>
                    </template>
                </n-slider>
            </div>

            <!-- 播放声音 -->
            <div class="play-voice">

                <n-button text @click="muteFn(false)" v-show="!usePlayConfig.mute">
                    <template #icon>
                        <n-icon :size="playControlIcon" :component="SoundOutlined" />
                    </template>
                </n-button>

                <n-button text @click="muteFn(true)" v-show="usePlayConfig.mute">
                    <template #icon>
                        <n-icon :size="playControlIcon" :component="SpeakerMute16Regular" />
                    </template>
                </n-button>

                <n-slider class="slider" :value="voice" :step="1" @update:value="updateVoice" :keyboard="false">
                    <template #thumb>
                        <n-icon-wrapper :size="24" :border-radius="12">
                            <n-icon :size="18" :component="HeadphonesSoundWave20Regular" />
                        </n-icon-wrapper>
                    </template>
                </n-slider>

            </div>

            <!-- 自动播放列表 -->
            <div class="play-auto">
                <n-popover trigger="hover">
                    <template #trigger>
                        <n-button :class="usePlayConfig.autoPlay ? 'play-auto-filter-style' : ''" text @click="setAutoPlay">
                            <template #icon>
                                <n-icon :size="playControlIcon" :component="Autocorrect24Regular" />
                            </template>
                        </n-button>
                    </template>
                    <span>自动播放</span>
                </n-popover>
            </div>

            <!-- 歌词 -->
            <div class="play-word">
                <n-button text>
                    <template #icon>
                        <n-icon :size="playControlIcon">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-geci1"></use>
                            </svg>
                        </n-icon>
                    </template>
                </n-button>
            </div>

        </div>

    </div>
</template>
<script setup lang="ts">
import {
    Previous16Regular, Pause16Regular, Play16Regular, Stop16Regular, Next16Regular, SpeakerMute16Regular, HeadphonesSoundWave20Regular,
    Clock16Regular, Autocorrect24Regular, TextBulletListRtl24Filled, HeartPulse20Regular
} from "@vicons/fluent";
import { SoundOutlined } from "@vicons/antd";
import { MapPin, ArrowsCross } from "@vicons/tabler";
import { EdtLoop } from "@vicons/carbon";
import { Howl } from 'howler';
import { useMessage } from 'naive-ui'
import { refreshUserAllInfo } from '../../ajax'
import { ref, onMounted, getCurrentInstance, onUnmounted, computed } from 'vue'
import { usePlayConfigStore, usePlayListStore, useSystemConfigStore, userInfoStore } from "../../store";
import { formatTimeToMinSec, refreshUserClientInfo, refreshUserIpInfo, importPlayListMode } from '../../util/calculate'
import defaultSrc from '../../assets/img/defaultIMG.png'

onMounted(async () => {

    // 监听键盘事件
    window.addEventListener('keydown', function (e: KeyboardEvent) {

        switch (e.key) {
            case ' ':
                howl.value?.playing() ? pauseAudio() : playAudio()
                break;
            default:
                break;
        }

        // ctrl + options
        if (e.ctrlKey) {
            switch (e.key) {
                case 'ArrowRight':
                    playSkip('next')
                    break;
                case 'ArrowLeft':
                    playSkip('pre')
                    break;
                case 'ArrowUp':
                    let addVoice = (usePlayConfig.voice < 1) ? Number((usePlayConfig.voice + 0.1).toFixed(1)) : 1
                    usePlayConfig.changeVoice(addVoice)
                    howl.value!.volume(addVoice)
                    break;
                case 'ArrowDown':
                    let decVoice = (usePlayConfig.voice > 0) ? Number((usePlayConfig.voice - 0.1).toFixed(1)) : 0
                    usePlayConfig.changeVoice(decVoice)
                    howl.value!.volume(decVoice)
                    break;
                default:
                    break;
            }
        }

    })

    // 组件挂载完后初始化一次
    initHowler(usePlayConfig.audioSrc)

    // 取消加载
    useSystemConfig.changeLoading(false, '加载中')

    // 清空一次乐库搜索值
    usePlayList.resetAudioLibraryList()

    // 乐库转为大厅
    useSystemConfig.changeShowAudioLibraryHall(true)

    // 上传用户客户端IP和地址、加载用户数据
    if (userInfo.loginState) {

        // 更新用户ip和设备
        const ipResult = await refreshUserIpInfo()
        if (ipResult.status) { // 上传用户客户端IP成功
            const addressResult = await refreshUserClientInfo(ipResult._ip)
            if (addressResult.status) { // 上传用户客户端设备成功
                userInfo.changeUserClientAndIp(ipResult._ip, ipResult.loginDate, addressResult._client)
            }
        }

        // 更新个人信息
        const { data } = await refreshUserAllInfo()
        await importPlayListMode('likePlayList', data.data.likePlayList)
        if (data.code == 0) {
            userInfo.changeUserInfo(data.data._id, data.data.username, data.data.roles, data.data.joinDate, data.data.level, data.data.cloundSize, data.data.useCloundSize, data.data.cloundAuth)
        } else {
            message.warning(data.message)
        }
    }

})

onUnmounted(() => {
    instance?.proxy?.$Bus.off('playLocalAudio')
    instance?.proxy?.$Bus.off('playAudioLibrary')
})

const message = useMessage()
const instance = getCurrentInstance()
const usePlayConfig = usePlayConfigStore()
const usePlayList = usePlayListStore()
const useSystemConfig = useSystemConfigStore()
const userInfo = userInfoStore()
let timeId: any = null
let countId: any = null


// 乐库音频播放监听
instance?.proxy?.$Bus.on('playAudioLibrary', function (params: any) {
    // 改变播放目录源
    usePlayConfig.changePlayListMode(params.playListMode)
    // 定位音频在列表的位置
    usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, params.index)
    // 清空播放位置
    usePlayConfig.changePosition(0)
    // 初始化播放器
    initHowler(params.audioSrc)
    howl.value!.play()
})
// 我的喜欢音频播放监听
instance?.proxy?.$Bus.on('playLikeAudio', function (params: any) {
    // 改变播放目录源
    usePlayConfig.changePlayListMode(params.playListMode)
    // 定位音频在列表的位置
    usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, params.index)
    // 清空播放位置
    usePlayConfig.changePosition(0)
    // 初始化播放器
    initHowler(params.audioSrc)
    howl.value!.play()
})
// 本地音频播放监听
instance?.proxy?.$Bus.on('playLocalAudio', function (params: any) {
    // 改变播放目录源
    usePlayConfig.changePlayListMode(params.playListMode)
    // 定位音频在列表的位置
    usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, params.index)
    // 清空播放位置
    usePlayConfig.changePosition(0)
    // 初始化播放器
    initHowler(params.audioSrc)
    howl.value!.play()
})


// 定时器暂停监听
instance?.proxy?.$Bus.on("countPause", function (params: any) {
    timeId = setTimeout(() => {
        showPauseOrPlay.value ? '' : pauseAudio()
        clearInterval(countId)
        useSystemConfig.changeCountPause(0)
    }, params.time);

    countId = setInterval(() => {
        let t = Number((useSystemConfig.countPause - 1000).toFixed(0))
        useSystemConfig.changeCountPause(t)
    }, 1000);
})
// 定时器暂停取消监听
instance?.proxy?.$Bus.on("countPauseCancel", function () {
    clearTimeout(timeId)
    clearInterval(countId)
})
// 监听系统托盘播放事件
window.api.playAudio(() => {
    showPauseOrPlay.value ? playAudio() : ''
})
// 监听系统托盘暂停事件
window.api.pauseAudio(() => {
    showPauseOrPlay.value ? '' : pauseAudio()
})
// 监听系统托盘下一曲事件
window.api.playSkip(() => {
    playSkip()
})
// 监听系统托盘顺序播放事件
window.api.olderPlay(() => {
    usePlayConfig.changePlayMode('order')
})
// 监听系统托盘随机播放事件
window.api.randomPlay(() => {
    usePlayConfig.changePlayMode('random')
})
// 监听系统托盘顺序播放事件
window.api.loopPlay(() => {
    usePlayConfig.changePlayMode('loop')
})
// 监听系统托盘顺序播放事件
window.api.likePlay(() => {
    usePlayConfig.changePlayMode('like')
})


// Howler实例
const howl = ref<Howl | null>(null)
// 播放控制icon大小
const playControlIcon = ref(25)
// 动态展示暂停或播放
const showPauseOrPlay = ref(true)
// 默认唱片
const defaultIMG = ref(defaultSrc)
// 动态控制是否旋转
const rotate = ref(false)
// 动态控制旋转是否重置
const stop = ref(false)
// 是否旋转以及旋转位置是否重置
const rotateFn = computed(() => {
    let str = ''
    stop.value ? '' : str += 'rotate-start '
    rotate.value ? '' : str += 'rotate-end '
    return str
})
// 媒体音量
const voice = computed(() => {
    return Number((usePlayConfig.voice * 100).toFixed(0))
})
// 媒体进度/时长
const audioProgress = ref(0)
// 播放定位usePlayConfig.position
// 播放目录源usePlayConfig.playListMode



// 初始化Howler程序
const initHowler = (_audioSrc: string): void => {

    let timeId: number | undefined = undefined

    // 关闭原有音源,只允许有一个音源
    howl.value !== null ? howl.value!.unload() : null

    // howl实例
    howl.value = new Howl({
        // 要为声音加载的轨道的源（URL 或 base64 数据 URI）Array/String[]，第一次加载时加载上次播放的地址
        src: [_audioSrc],
        // 强制使用 HTML5 音频。这应该用于大型音频文件，这样您就不必在播放前等待完整文件下载和解码
        html5: true,
        // 声音大小
        volume: usePlayConfig.voice,
        // 静音
        mute: usePlayConfig.mute,
        // 是否单曲循环
        loop: usePlayConfig.playMode == "loop" ? true : false,
        // 是否自动播放
        autoplay: usePlayConfig.autoPlay ? true : false,
        // 播放速度
        rate: usePlayConfig.rate,
        // 同原生的preload
        preload: "metadata",
        // 分割
        sprite: {},
        // 加载音频时激发
        onload: function () {
            // 获取音频的长度
            audioProgress.value = Math.round(howl.value!.duration())
        },
        // 加载音频失败时激发 
        onloaderror: function () {
            message.error('加载音频失败，请检查播放源是否存在。')
        },
        // 播放音频时触发
        onplay: function () {
            // 显示暂停按钮
            showPauseOrPlay.value = false
            // 是否跳转进度播放
            usePlayConfig.position !== 0 ? updateProgress() : ''
            // 是否旋转
            rotate.value = true
            stop.value = false
            // 播放时间记录
            timeId = Number(setInterval(() => {
                let time = Number((usePlayConfig.position + 1).toFixed(0))
                usePlayConfig.changePosition(time)
                usePlayConfig.changePlayTime(Number((usePlayConfig.playTime + 1).toFixed(0)))
            }, 1000))
        },
        // 暂停音频时触发
        onpause: function () {
            // 显示播放按钮
            showPauseOrPlay.value = true
            // 是否旋转
            rotate.value = false
            // 停止播放时间记录
            clearInterval(timeId)
        },
        // 跳转定位时触发
        onseek: function () {
        },
        // 停止播放时触发
        onstop: function () {
            // 显示播放按钮
            showPauseOrPlay.value = true
            // 清除进度
            usePlayConfig.changePosition(0)
            // 是否旋转
            rotate.value = false
            stop.value = true
            // 停止播放时间记录
            clearInterval(timeId)
        },
        // 播放完毕时触发
        onend: function () {
            // 显示播放按钮
            showPauseOrPlay.value = true
            // 重置进度条
            audioProgress.value = 0
            usePlayConfig.changePosition(0)
            // 是否旋转
            rotate.value = false
            stop.value = true
            // 停止播放时间记录
            clearInterval(timeId)
            // 根据播放模式做出对应继续播放
            playSkip('next')
        },
        // 无法播放音频时触发
        onplayerror: function () {
            message.error('播放失败，请稍后再试。')
        }
    });

    // 废弃代码===>自动播放时，改变 播放/暂停 图标显示
    // usePlayConfig.autoPlay ? showPauseOrPlay.value = false : ''

}


// 切换播放模式
const changePlayMode = (value: PlayConfigState['playMode']) => {
    if (value == 'like') {
        // 暂时没有like模式
        usePlayConfig.changePlayMode('order')
        window.electron.ipcRenderer.send('changePlayMode', usePlayConfig.playMode)
    } else {
        usePlayConfig.changePlayMode(value)
        window.electron.ipcRenderer.send('changePlayMode', usePlayConfig.playMode)
    }
}
// 设置自动播放
const setAutoPlay = () => {
    usePlayConfig.changeAutoPlay(!usePlayConfig.autoPlay)
    message.info(`${usePlayConfig.autoPlay ? '已开启自动播放功能' : '已关闭自动播放功能'}`)
}
// 静音
const muteFn = (flag: boolean) => {
    if (!flag) {
        usePlayConfig.changeMute(true)
        howl.value!.mute(true)
    } else {
        usePlayConfig.changeMute(false)
        howl.value!.mute(false)
    }
}
// 暂停音频
const pauseAudio = () => {
    howl.value!.pause()
}
// 播放音频
const playAudio = () => {
    howl.value!.play()
}
// 停止音乐
const stopAudio = () => {
    howl.value!.stop()
}
// 跳转播放
const playSkip = (mode: string = 'next') => {

    // 重置进度条
    usePlayConfig.changePosition(0)

    if (mode == 'pre') { // 上一首

        switch (usePlayConfig.playMode) {
            case 'order':
                if (usePlayList[`${usePlayConfig.playListMode}`].length == 0) {
                    initHowler(usePlayConfig.audioSrc)
                    howl.value!.play()
                } else {

                    if (usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index - 1] == undefined) { // 当前列表第一个
                        usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][usePlayList[`${usePlayConfig.playListMode}`].length - 1].audioName)
                        usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][usePlayList[`${usePlayConfig.playListMode}`].length - 1].audioCover)
                        usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][usePlayList[`${usePlayConfig.playListMode}`].length - 1].audioSrc)
                        usePlayConfig.changeIndex(usePlayList[`${usePlayConfig.playListMode}`].length - 1)
                        usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)
                        initHowler(usePlayConfig.audioSrc)
                        howl.value!.play()
                    } else {
                        usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index - 1].audioName)
                        usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index - 1].audioCover)
                        usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index - 1].audioSrc)
                        usePlayConfig.changeIndex(usePlayConfig.index - 1)
                        usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)
                        initHowler(usePlayConfig.audioSrc)
                        howl.value!.play()
                    }

                }
                break;
            case 'random':
                if (usePlayList[`${usePlayConfig.playListMode}`].length == 0) {
                    initHowler(usePlayConfig.audioSrc)
                    howl.value!.play()
                } else {

                    const random = Math.floor(Math.random() * usePlayList[`${usePlayConfig.playListMode}`].length)
                    if (usePlayList[`${usePlayConfig.playListMode}`].length == 1) { // 列表只有一首歌

                        usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random].audioName)
                        usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random].audioCover)
                        usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random].audioSrc)
                        usePlayConfig.changeIndex(random)
                        usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)

                    } else { // 列表有多首
                        if (usePlayList[`${usePlayConfig.playListMode}`][random].audioSrc == usePlayConfig.audioSrc) { // 检测两首歌是否是同一首

                            if (usePlayList[`${usePlayConfig.playListMode}`][random + 1] !== undefined) {
                                usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random + 1].audioName)
                                usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random + 1].audioCover)
                                usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random + 1].audioSrc)
                                usePlayConfig.changeIndex(random + 1)
                                usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)
                            }

                            if (usePlayList[`${usePlayConfig.playListMode}`][random - 1] !== undefined) {
                                usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random - 1].audioName)
                                usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random - 1].audioCover)
                                usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random - 1].audioSrc)
                                usePlayConfig.changeIndex(random - 1)
                                usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)
                            }

                        } else { // 正常随机

                            usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random].audioName)
                            usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random].audioCover)
                            usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random].audioSrc)
                            usePlayConfig.changeIndex(random)
                            usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)

                        }
                    }
                    initHowler(usePlayConfig.audioSrc)
                    howl.value!.play()

                }
                break;
            case 'loop':
                initHowler(usePlayConfig.audioSrc)
                howl.value!.play()
                break;
            case 'like':
                break;
            default:
                break;
        }

    } else if (mode == 'next') { // 下一首

        switch (usePlayConfig.playMode) {
            case 'order':
                if (usePlayList[`${usePlayConfig.playListMode}`].length == 0) {
                    initHowler(usePlayConfig.audioSrc)
                    howl.value!.play()
                } else {

                    if (usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index + 1] == undefined) { // 当前列表最后一个

                        usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][0].audioName)
                        usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][0].audioCover)
                        usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][0].audioSrc)
                        usePlayConfig.changeIndex(0)
                        usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)
                        initHowler(usePlayConfig.audioSrc)
                        howl.value!.play()

                    } else {

                        usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index + 1].audioName)
                        usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index + 1].audioCover)
                        usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][usePlayConfig.index + 1].audioSrc)
                        usePlayConfig.changeIndex(usePlayConfig.index + 1)
                        usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)
                        initHowler(usePlayConfig.audioSrc)
                        howl.value!.play()

                    }

                }
                break;
            case 'random':
                if (usePlayList[`${usePlayConfig.playListMode}`].length == 0) {
                    initHowler(usePlayConfig.audioSrc)
                    howl.value!.play()
                } else {

                    const random = Math.floor(Math.random() * usePlayList[`${usePlayConfig.playListMode}`].length)
                    if (usePlayList[`${usePlayConfig.playListMode}`].length == 1) { // 列表只有一首歌

                        usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random].audioName)
                        usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random].audioCover)
                        usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random].audioSrc)
                        usePlayConfig.changeIndex(random)
                        usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)

                    } else { // 列表有多首
                        if (usePlayList[`${usePlayConfig.playListMode}`][random].audioSrc == usePlayConfig.audioSrc) { // 检测两首歌是否是同一首

                            if (usePlayList[`${usePlayConfig.playListMode}`][random + 1] !== undefined) {

                                usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random + 1].audioName)
                                usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random + 1].audioCover)
                                usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random + 1].audioSrc)
                                usePlayConfig.changeIndex(random + 1)
                                usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)

                            }

                            if (usePlayList[`${usePlayConfig.playListMode}`][random - 1] !== undefined) {

                                usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random - 1].audioName)
                                usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random - 1].audioCover)
                                usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random - 1].audioSrc)
                                usePlayConfig.changeIndex(random - 1)
                                usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)

                            }

                        } else { // 正常随机

                            usePlayConfig.changeAudioName(usePlayList[`${usePlayConfig.playListMode}`][random].audioName)
                            usePlayConfig.changeAudioCover(usePlayList[`${usePlayConfig.playListMode}`][random].audioCover)
                            usePlayConfig.changeAudioSrc(usePlayList[`${usePlayConfig.playListMode}`][random].audioSrc)
                            usePlayConfig.changeIndex(random)
                            usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, usePlayConfig.index)

                        }
                    }
                    initHowler(usePlayConfig.audioSrc)
                    howl.value!.play()

                }
                break;
            case 'loop':
                initHowler(usePlayConfig.audioSrc)
                howl.value!.play()
                break;
            case 'like':
                break;
            default:
                break;
        }

    }

}
// 格式化音频时间
const formatTime = () => {
    return formatTimeToMinSec(usePlayConfig.position) + ' / ' + formatTimeToMinSec(audioProgress.value)
}
// 调整播放进度
const updateProgress = () => {
    // 本地存储进度
    usePlayConfig.changePosition(usePlayConfig.position)
    // 播放器调整播放进度
    howl.value!.seek(usePlayConfig.position)
}
// 调整音量
const updateVoice = (value: number | [number, number]) => {

    usePlayConfig.changeVoice(Number((value as number / 100).toFixed(2)))

    // 当前有可用播放源
    howl.value!.volume(Number((value as number / 100).toFixed(2)))

}


</script>
<style scoped lang="less">
.play-control-container {
    width: calc(100vw);
    height: 50px;
    position: fixed;
    bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    z-index: 99;

    .play-control-content {
        width: calc(100vw - 50px);
        min-width: 850px;
        height: 50px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border: 1px solid rgb(54, 55, 56);
        box-shadow: 0 0 2px rgb(54, 55, 56);
        opacity: 0.8;

        .play-record {
            height: 80px;
            width: 80px;
            display: flex;
            align-items: center;
            border-radius: 50% 50%;
            justify-content: center;
            overflow: hidden;
        }

        .rotate-start {
            animation: rotate 4s linear infinite;
            animation-fill-mode: forwards;
        }

        .rotate-end {
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotateZ(0deg);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }

        .play-control-btn {
            width: 260px;
            display: flex;
            justify-content: center;

            div {
                margin-right: 10px;
            }
        }

        .play-mode {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .play-position {
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .play-voice {
            width: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .play-auto {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;

            .play-auto-filter-style {
                filter: drop-shadow(0 0 3px rgb(0, 187, 255));
            }
        }

        .play-word {
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.slider {
    margin-left: 5px;
}
</style>
